<div class="form-model-class">
    <form class="layui-form" lay-filter="favorite-form">
        <input name="id" type="hidden">

        <div class="layui-form-item">
            <label class="layui-form-label">资源名称 <span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input name="name" required lay-verify="required" placeholder="请输入资源名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">url <span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input name="url" required lay-verify="required" placeholder="请输入资源URL" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">资源类别 <span style="color: red">*</span></label>
            <div class="layui-input-block">
                <select name="catalogId" id="catalogId" lay-verify="required">
                    <option value="">请选择资源类别</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">logo</label>
            <div class="layui-input-block">
                <input name="logo" type="hidden">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="logoUploadBtn">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="logoShow" width="94px" height="94px">
                        <p id="logoUploadFailure"></p>
                    </div>
                    <div style="width: 95px; margin-top: -8px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="logoUploadProcess">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 10px;">
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入资源描述" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="favoriteForm">保存</button>
                <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'element', 'upload', 'layer', 'admin'], function () {
        var $ = layui.jquery,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer,
            form = layui.form,
            admin = layui.admin;

        var event = admin.getTempData(admin.config.favorite.table_cache_event);
        var obj = admin.getTempData(admin.config.favorite.table_cache_name);

        // 加载下拉框
        admin.gajax(admin.config.favorite.backend_url + '/resource-catalog-list', null, 'GET', function (r) {
            console.log(r);
            if (r.code === 0) {
                // 渲染下拉框
                let catalogSelector = $('#catalogId');
                let list = r.data;
                let str = '';
                if (list != null && list.length > 0) {
                    for (let i = 0; i < list.length; i++) {
                        if (list[i].children == null || list[i].dirFlag === 2) {
                            str += '<option value="' + list[i].id + '">' + list[i].name + '</option>';
                        } else if (list[i].children.length > 0 ) {
                            str += ('<optgroup label="' + list[i].name + '">');
                            $.each(list[i].children, function (idx, obj) {
                                str += ('<option value="' + obj.id + '">' + obj.name + '</option>');
                            });
                            str += '</optgroup>'
                        }
                    }
                }

                catalogSelector.append(str);
                form.render('select');
            }
        });

        if (event === 'modify' && obj) {
            $('input[name=id]').val(obj.id);
            form.val('favorite-form', obj);
            if (obj.logo && obj.logo !== '') {
                admin.gajax(admin.config.favorite.image_url + '/view-base64?path=' + obj.logo, {}, 'GET', function (r) {
                    if (r.code === 0) {
                        $('#logoShow').attr('src', r.data);
                    } else {
                        layer.msg("图片加载失败！", {icon: 2, time: 1000});
                    }
                })
                // $('#logoShow').attr('src', obj.logo);
            }
        }

        // 监听提交
        form.on('submit(favoriteForm)', function (data) {
            admin.gajax(admin.config.favorite.backend_url, JSON.stringify(data.field), 'POST', function (r) {
                if (r.code === 0) {
                    layer.msg('保存成功', {time: 1000, icon: 1});
                    setTimeout(_ => {layer.closeAll()}, 1000);
                } else {
                    layer.msg(r.message, {time: 1000, icon: 2});
                }
                return false;
            });
            return false;
        });

        // 监听文件上传
        var uploadInst = upload.render({
            elem: '#logoUploadBtn',
            url: admin.config.favorite.image_url + '/upload', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            method: 'POST',
            acceptMime: 'image/*',
            before: function (obj) {
                // 预读本地文件示例，不支持 ie8
                obj.preview(function (index, file, result) {
                    console.log(file);
                    $('#logoShow').attr('src', result); //图片链接（base64）
                });

                element.progress('logoUploadProcess', '0%'); //进度条复位
                $('input[name=logo]').val(''); // 置空路径输入框
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                //如果上传失败
                if (res.code === 0) {
                    // 上传成功的一些操作
                    $('input[name=logo]').val(res.data);
                    $('#logoUploadFailure').html(''); //置空上传失败的状态
                } else {
                    return layer.msg('上传失败', {icon: 2, time: 1200});
                }
            },
            error: function () {
                //演示失败状态，并实现重传
                var logoUploadFailure = $('#logoUploadFailure');
                logoUploadFailure.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                logoUploadFailure.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            //进度条
            progress: function (n, elem, e) {
                element.progress('logoUploadProcess', n + '%'); // 可配合 layui 进度条元素使用
                if (n === 100) layer.msg('上传成功', {icon: 1});
            }
        });
    });
</script>

<style lang="less">
    .form-model-class {
        padding: 15px 30px 15px 15px;
    }

    .form-model-class .layui-form-label {
        width: 108px !important;
    }

    .layui-layer-content {
        overflow: unset !important;
    }
</style>